<template>
	<view>
		<u-skeleton rows="100" title loading v-if="isshow"></u-skeleton>
		<view class="" v-else>
			<view class="search">
				<image class="logo" src="../../static/images/logo.png" mode=""></image>
				<u-search margin="20rpx" shape="square" :showAction="isshow"></u-search>
			</view>
			<u-subsection :list="list" :current="curNow" @change="sectionChange" activeColor='#FF6040'
				bgColor='#FFf'>
			</u-subsection>
			<u-swiper :list="list1" autoplay circular interval='1000'></u-swiper>
			<u-grid :border="false" col="5">
				<u-grid-item v-for="(listItem,listIndex) in list2" :key="listItem.id">
					<u-icon :customStyle="{paddingTop:20+'rpx'}" :name="listItem.name" :size="22"></u-icon>
					<text class="grid-text">{{listItem.title}}</text>
				</u-grid-item>
			</u-grid>
			<view class="three">
				<view class="left">
					<view class="top">
						<view>限时秒杀</view>
						<view>查看更多</view>
					</view>
					<u-count-down :time="30 * 60 * 60 " format="HH:mm:ss" autoStart millisecond>
					</u-count-down>
				</view>
				<view class="right">
					<view class="right_top">
						<view class="">品牌上新</view>
						<view class="">9点整,抢大牌</view>
						<view class="">疯抢红包</view>
					</view>
					<view class="right_bottom">
						<view class="">日用好物</view>
						<view class="">愿君多采撷</view>
					</view>
				</view>
			</view>
			
			
			
			<view class="">
			<u-subsection activeColor="#f56c6c" @change="changeType" mode='subsection' :list="goodsInfo"
			:current="current"></u-subsection>
			</view>


			<view class="" v-if="current==0">
				<view class="box" v-for="item in hotlist" :key="item.id" >
				<view class="leftbox">
					<!-- <img :src="baseUrl+item.img" alt=""> -->
					<img :src='baseurl+item.img'>
				</view>
				<view class="rightbox">
					<view class="title1">
						{{item.goodsname}}
					</view>
					<view class="price">
						现价格:&yen;{{item.price}}
					</view>
					<view class="lowprice">
						原价格:&yen;{{item.market_price}}
					</view>
					<view class="text">
						<button @click="todetail(item.id)" class="btn">立即抢购</button>
					</view>
				</view>
			</view>
			</view>
			
			<view class="" v-else-if="current==1">
				<view class="box" v-for="item in newlist" :key="item.id">
				<view class="leftbox">
					<!-- <img :src="baseUrl+item.img" alt=""> -->
					<img :src='baseurl+item.img'>
				</view>
				<view class="rightbox">
					<view class="title1">
						{{item.goodsname}}
					</view>
					<view class="price">
						现价格:&yen;{{item.price}}
					</view>
					<view class="lowprice">
						原价格:&yen;{{item.market_price}}
					</view>
					<view class="text">
						<button @click="todetail(item.id)" class="btn">立即抢购</button>
					</view>
				</view>
			</view>
			</view>
			
			<view class=""  v-else="current==2">
				<view class="box" v-for="item in alllist" :key="item.id">
				<view class="leftbox">
					<!-- <img :src="baseUrl+item.img" alt=""> -->
					<img :src='baseurl+item.img'>
				</view>
				<view class="rightbox">
					<view class="title1">
						{{item.goodsname}}
					</view>
					<view class="price">
						现价格:&yen;{{item.price}}
					</view>
					<view class="lowprice">
						原价格:&yen;{{item.market_price}}
					</view>
					<view class="text">
						<button @click="todetail(item.id)" class="btn">立即抢购</button>
					</view>
				</view>
			</view>
			</view>
			

		</view>
	</view>
</template>

<script>
	import {
		getBanner,
		getHomelist,
		getseckill
	} from '@/rquest/api.js'
	import {
		baseurl
	} from '@/rquest/baseUrl.js'
	import {getuser} from '../../common/getuser.js'
	export default {
		data() {
			return {
				current: 0,
				goodsInfo: ['热门推荐', '上新推荐', '所有商品'],
				isshow: true,
				loading: true,
				time: '',
				flag: 1,
				baseurl: baseurl,
				timeData: {},
				list1: [

				],
				keyword: '请输入关键字',
				list: ['手机通讯', '生活家电', '家居', '服装', '玩具', '分类'],
				curNow: 0,
				list2: [{
						name: 'photo',
						title: '图片'
					},
					{
						name: 'lock',
						title: '锁头'
					},
					{
						name: 'star',
						title: '星星'
					},
					{
						name: 'hourglass',
						title: '沙漏'
					},
					{
						name: 'home',
						title: '首页'
					}
				],
				hotlist: [],
				newlist: [],
				alllist: []
			}
		},
		methods: {
			sectionChange(index) {
				this.curNow = index;
			},
			// 商品列表
			changeType(e) {
				// console.log(e);
			this.current = e
			},
			todetail(id){
				console.log(id);
				uni.navigateTo({
					url:'../detail/detail?id='+id
				})
			}
		},
		onLoad() {
			getuser()
			setTimeout(() => {
				this.isshow = false
			}, 3000)
			this.baseurl = this.$img
			console.log(this.baseurl);
			getBanner()
				.then(res => {
					console.log(res);
					if (res.data.code == 200) {
						this.list1 = res.data.list.map(item => this.$img + item.img)
					}
				}),
				getHomelist()
				.then(res => {
					// console.log(res, 11111111);
					if (res.data.code == 200) {
						
						this.hotlist = res.data.list[0].content
						this.newlist = res.data.list[1].content
						this.alllist = res.data.list[2].content

					}
				}),
				getseckill()
				.then(res => {
					if (res.data.code == 200) {
						this.time = res.header.Date
					}
					console.log(this.time, 333333333);
				})
		}
	}
</script>

<style scoped>
	.logo{
		height: 70rpx;
		width: 36%;
	}
	.search {
		width: 100%;
		background-color: #FF6040;
		height: 120rpx;
		overflow: hidden;
		box-sizing: border-box;
		display: flex;
		padding: 0px 0rpx 0px 16rpx;
		align-items: center;
	}
	.grid-text {
		font-size: 14px;
		color: #909399;
		padding: 10rpx 0 20rpx 0rpx;
		/* #ifndef APP-PLUS */
		box-sizing: border-box;
		/* #endif */
	}

	.three {
		height: 350rpx;
		display: flex;
		justify-content: space-evenly;
		margin-bottom: 20rpx;
	}

	.three .left {
		width: 45%;
		height: 100%;
		background-image: url('@/static/images/图1.png');
		padding: 20rpx 15rpx;
		box-sizing: border-box;
	}

	.three .top {
		display: flex;
		justify-content: space-between;
		margin-top: 20rpx;
	}

	.top :nth-child(1) {
		color: green;
	}

	.top :nth-child(2) {
		font-weight: bold;
		line-height: 50rpx;
	}

	.right {
		width: 45%;
		height: 100%;
	}

	.right view {
		height: 45%;
	}

	.right_top {
		background-image: url('@/static/images/图2.png');
		color: tomato;
		padding: 20rpx 15rpx;
		box-sizing: border-box;
		display: flex;
		flex-direction: column;
		justify-content: space-evenly;
	}

	.right_bottom {
		background-image: url('@/static/images/图3.png');
		margin-top: 10%;
		color: purple;
		padding: 20rpx 15rpx;
		box-sizing: border-box;
	}

	.title {
		width: 100%;
		box-sizing: border-box;
		display: flex;
		margin: 20rpx 0rpx !important;
	}

	.title view {
		width: 33.3%;
		height: 100rpx;
		line-height: 100rpx;
		text-align: center;
		color: white;
		color: orange;
	}

	.active {
		background-color: orange !important;
		color: #fff !important;
	}

	.hot_view {
		width: 80%;
		height: 240rpx;
		margin: 40rpx auto;
		display: flex;
		justify-content: space-between;
		align-items: center;
		border: 1px solid #ccc;
	}

	.hot_left {
		width: 50%;
		height: 240rpx;
		display: flex;
		flex-direction: column;
		justify-content: space-around;
	}

	.hot_view image {
		width: 100% !important;
		height: 100% !important;
	}

	.hot_right {
		width: 50%;
		padding-left: 10%;
		box-sizing: border-box;
		height: 240rpx;
		display: flex;
		flex-direction: column;
		justify-content: space-around;
	}

	.hot_right :nth-child(2) {
		color: red;
	}

	.hot_right :nth-child(3) {
		color: #909399;
		text-decoration: line-through;
	}

	.hot_right :nth-child(4) {
		background-color: orange;
		width: 60%;
		height: 80rpx;
		color: #fff;
		border-radius: 10rpx;
		text-align: center;
		line-height: 80rpx;
	}

	.box {
		width: 100%;
		height: 280rpx;
		background-color: #fff;
		margin: 20rpx 0px;
	}

	.leftbox {
		width: 36%;
		height: 280rpx;
		box-sizing: border-box;
		float: left;
		padding: 19rpx;
	}

	.leftbox image {
		width: 100%;
		height: 100%;
	}

	.rightbox {
		box-sizing: border-box;
		float: right;
		width: 64%;
		height: 280rpx;
		padding: 12rpx;
	}

	.title1 {
		font-weight: bold;
		display: -webkit-box;
		-webkit-box-orient: vertical;
		-webkit-line-clamp: 2;
		overflow: hidden;
		font-size: 30rpx;
	}

	.price {
		color: #FF6040;
		margin-top: 14rpx;
		font: bold;
		font-size: 39rpx;
	}

	.lowprice {
		color: #ccc;
		text-decoration: line-through;
		margin-top: 4rpx;
		font-size: 30rpx;
		
	}

	.text {
		font-size: 15px;
		margin-top: 10rpx;
		color: grey;
	}

	.btn {
		height: 60rpx;
		background-color: #FF6040;
		color: #fff;
		line-height: 60rpx;
	}
</style>
